<script setup lang="ts">
import { ref, reactive, defineComponent } from "vue";
const baseUrl =
  "https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/";

// interface FormState {
//   name: string;
//   age: number | undefined;
// }
const timeLineStatus = ref("0");

const isOpen = defineModel("open", {
  type: Boolean,
});

const emits = defineEmits<{
  (e: "saveTemplate"): void;
  (e: "close"): void;
}>();

const setIsOpen = (value: boolean) => {
  isOpen.value = value;
};

const onClose = () => {
  setIsOpen(false);
};
</script>

<template>
  <a-modal v-model:open="isOpen" width="1000px" h title="订单信息" @ok="onClose">
    <div class="max-h-[70vh] overflow-auto">
      <a-flex class="bg-#fafafa pt-16px pl-16px">
        <div class="!w-100px !h-100px mr-20px">
          <img class="w-100% h-100%" :src="`${baseUrl}abstract01.jpg`" />
        </div>
        <div style="width: calc(100% - 100px)">
          <a-descriptions>
            <a-descriptions-item label="收件人地址" :span="3">
              No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
            </a-descriptions-item>
            <a-descriptions-item label="收件人姓名">xxxxx</a-descriptions-item>
            <a-descriptions-item label="商品名称">xxxxx</a-descriptions-item>
            <a-descriptions-item label="卖家备注">xxxxx</a-descriptions-item>
            <a-descriptions-item label="收件人电话">xxxxx</a-descriptions-item>
            <a-descriptions-item label="SUK规格">xxxxx</a-descriptions-item>
            <a-descriptions-item label="买家备注">xxxxx</a-descriptions-item>
          </a-descriptions>
        </div>
      </a-flex>
      <h3 class="py-16px mb-0">订单轨迹</h3>
      <a-radio-group class="mb-16px" v-model:value="timeLineStatus">
        <a-radio-button value="0">正向</a-radio-button>
        <a-radio-button value="1">售后</a-radio-button>
      </a-radio-group>
      <a-flex class="bg-#fafafa pl-16px">
        <div class="w-50%">
          <h3 class="py-16px">抖店</h3>
          <a-timeline>
            <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
            <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
            <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
            <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
          </a-timeline>
        </div>
        <div class="w-50%">
          <h3 class="py-16px">平台</h3>
          <a-timeline>
            <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
            <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
            <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
            <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
          </a-timeline>
        </div>
      </a-flex>
      <h3 class="py-16px">物流轨迹</h3>
      <div class="bg-#fafafa pl-16px pt-16px">
        <a-timeline>
          <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
          <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
          <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
          <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
        </a-timeline>
      </div>
    </div>
    <template #footer>
      <a-button key="back" @click="onClose">关闭</a-button>
    </template>
  </a-modal>
</template>

<style lang="postcss" scoped>
/* For demo */
:deep(.ant-carousel) {
  width: 300px;
  height: 300px;
}

:deep(.slick-dots) {
  position: relative;
  height: auto;
}

:deep(.slick-slide img) {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 80%;
}

:deep(.slick-arrow) {
  display: none !important;
}

:deep(.slick-thumb) {
  bottom: 0px;
}

:deep(.slick-thumb li) {
  width: 60px;
  height: 45px;
}

:deep(.slick-thumb li img) {
  width: 100%;
  height: 100%;
  filter: grayscale(60%);
  display: block;
}

:deep .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}

:deep .slick-thumb li.slick-active {
  width: 60px;
}
</style>
